<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>系统菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .custom-tree-node .config {
            padding: 10px 0 10px 8px;
            border-left: 1px solid #EBEEF5;
        }

        .el-tree {
            height: 100%;
            overflow: auto;
            border: 1px solid #EBEEF5;
        }

        .el-tree-node__content {
            padding: 10px 0 10px;
            border-bottom: 1px solid #EBEEF5;
        }

        .el-dialog__header {
            padding: 15px 15px 10px;
        }

        .el-dialog__body {
            padding: 15px;
        }

        .el-dialog__footer {
            padding: 5px 15px 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="query">
            <div class="header" v-show="buttonRole.UR_Query || buttonRole.UR_New">
                <div style="margin: 0 15px;">
                    <span v-show="buttonRole.UR_Query">菜单名称：</span>
                    <el-input v-show="buttonRole.UR_Query" size="medium" v-model="form.value" style="width: 200px;margin-right:10px;"
                        placeholder="请输入菜单名称" clearable></el-input>
                    <el-button v-show="buttonRole.UR_Query" icon="el-icon-search" size="medium" @click="handleSerach">查询</el-button>
                    <el-button v-show="buttonRole.UR_New" icon="el-icon-circle-plus-outline" size="medium" type="primary" @click="handleAdd" plain round>添加</el-button>
                </div>
            </div>
            <el-row class="main" type="flex" :style="{height:`calc(100vh ${(buttonRole.UR_Query || buttonRole.UR_New) ? '- 96px':'- 30px'})`}">
                <el-col :span="24" class="right">
                    <el-tree :data="tableData" node-key="Model_Number" default-expand-all :expand-on-click-node="false" :props="defaultProps">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                                <i v-show="node.level==1" :class="data.Icon"></i> 
                                <span>{{ node.label }}</span>
                                <span v-show="data.Url" style="color: #F56C6C;">（<i class="el-icon-document"></i>已绑定页面）</span>
                                <span v-show="data.SQL_SerialNumber" style="color: #F56C6C">（<i class="el-icon-s-tools"></i>已配置SQL）</span>
                            </span>
                            <span class="config" v-show="buttonRole.UR_Modify || buttonRole.UR_Del">
                                <el-button v-show="buttonRole.UR_Modify" :type="!data.Url?'success':'warning'" size="small"
                                    @click="handleAdd(node,data)">{{!data.Url?'添加子菜单':'配置数据源'}}</el-button>
                                <el-button v-show="buttonRole.UR_Modify" type="primary" size="small" @click="handleEdit(node, data)">编辑</el-button>
                                <el-button v-show="buttonRole.UR_Del" type="danger" size="small" @click="handleRemove(data)">删除</el-button>
                            </span>
                        </span>
                    </el-tree>
                </el-col>
            </el-row>
        </div>
        <!-- 添加菜单 -->
        <add-node :data="nodeData" :page="tableData" :visible.sync="dialogVisible" @success="getData"></add-node>
        <edit-node :data="nodeEditData" :page="tableData" :visible.sync="dialogEditVisible" @success="getData"></edit-node>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>